<template>
    <div> 
        <el-dialog v-dialogDrag title="新增" :visible="isShowAdd" width="40%" @close="dialogClose">
            <el-form ref="addForm" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="日期" prop="date">
                    <el-date-picker
                    v-model="ruleForm.date"
                    type="date"
                    placeholder="选择日期"
                    class="select">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="金额" prop="money">
                    <el-input v-model="ruleForm.money"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="ruleForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitData()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
 
<script>

export default {
    //接受父组件
    props: {
        isShowAdd: {
            type: Boolean
        },
    },

    data () {
        return {
            ruleForm: {
                date: '',
                money: '',
                remark: '',
            },
            rules: {
                date: [{
                    required: true,
                    message: '请选择',
                    trigger: 'blur'
                }],
                money: [{
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }],
                remark: [{
                    required: false,
                    trigger: 'blur'
                }],
            },
        }
    },
    methods: {
        dialogClose () {
            this.$emit('dialogClose');
        },
        submitData () {
            this.$refs.addForm.validate((valid) => {
                if (!valid) {
                    return ;
                }
                else {
                    this.$emit('dialogClose');
                }
            });
        },

    },
    
}
</script>

<style lang="less" scoped>
.select{
    width: 100%;
}
</style>